<script setup>
import { ref, reactive } from 'vue'

// 导入API
import { getUserInfoAPI, getBlogTagsAPI, getAllBlogAPI, getBlogByTagAPI } from '@/apis/homeApi'

// 导入基地址
import { baseURL } from '@/utils/http.js'


// 用户信息
const userInfo = ref({
  area: '北京',
  desc: '描述',
  email: '邮箱',
  gender: '性别',
  nickname: '昵称',
  tags: ['标签1', '标签2', '标签3'],
  icon: 'https://picsum.photos/200/200'
})
// 获取用户信息
async function getUserInfo() {
  const res = await getUserInfoAPI()
  // console.log(res)
  userInfo.value = res.data.attributes
  userInfo.value.icon = baseURL + res.data.attributes.icon.data.attributes.url
}
getUserInfo()



// 绑定文章数据
const articleInfo = reactive({
  tags: [
    {
      id: 0,
      title: "全部"
    },
    {
      id: 1,
      title: "分类1"
    },
    {
      id: 2,
      title: "分类2"
    },
  ],
  articles: [
    { id: 1, title: '文章的标题多写一些1', cover: 'https://picsum.photos/300/200', },
    { id: 2, title: '文章的标题多写一些2', cover: 'https://picsum.photos/400/200', },
    { id: 3, title: '文章的标题多写一些3', cover: 'https://picsum.photos/300/400', },
    { id: 4, title: '文章的标题多写一些4', cover: 'https://picsum.photos/300/500', },
    { id: 5, title: '文章的标题多写一些5', cover: 'https://picsum.photos/400/200', },
  ]
})
// 文章分类
async function getBlogTags() {
  const res = await getBlogTagsAPI()
  articleInfo.tags = res.data.map(v => {
    const { id, attributes: { title } } = v
    return { id, title }
  })
  articleInfo.tags.unshift({ id: 0, title: '全部' })

}
getBlogTags()


// 全部文章
const getAllBlog = async () => {
  const res = await getAllBlogAPI()
  articleInfo.articles = res.data.map(v => {
    // data[0].attributes.cover.data.attributes.url
    const { id, attributes: { title, cover } } = v
    return {
      id, title,
      cover: baseURL + cover.data.attributes.url
    }
  })
}

getAllBlog()

// tab切换更新文章
const tabClick = async (e) => {
  // 清空默认文章
  articleInfo.articles = []
  // 获取全部文章
  if (e.name === 0) {
    // console.log('获取全部文章')
    getAllBlog()
    return
  }

  console.log('获取对应分类文章')

  // 根据id获取指定文章
  const res = await getBlogByTagAPI(e.name)
  // 获取文章
  const articles = res.data.attributes.articles.data

  articleInfo.articles = articles.map(v => {
    const { id, attributes: { title, cover } } = v
    return {
      id, title: title,
      cover: baseURL + cover.data.attributes.url
    }
  })
}


</script>

<template>
  <!-- 个人信息 -->
  <div class="top-container">
    <!-- 导航 -->
    <van-nav-bar class :border="false" fixed />
    <!-- 随机背景 -->
    <VanImage class="info-bg" height="250" width="100%" fit="cover" src="https://picsum.photos/500/500" />

    <!-- 个人信息 -->
    <van-row class="info-container">
      <van-col offset="1" span="6">
        <VanImage class="icon-img" round height="70" width="70" fit="cover" :src="userInfo.icon"></VanImage>
      </van-col>
      <van-col span="17">
        <h4 class="username">{{ userInfo.nickname }}</h4>
        <p class="email">邮箱:{{ userInfo.email }}</p>
        <p class="area">所在地:{{ userInfo.area }}</p>
      </van-col>
      <van-col offset="1" span="23" class="desc">
        {{ userInfo.desc }}
      </van-col>
      <van-col offset="1" span="23">
        <!-- 性别 -->
        <van-tag size="medium" round color="#7b8584" text-color="#fff">{{ userInfo.gender ? '男' : '女' }}</van-tag>
        <!-- 个人标签 -->
        <van-tag v-for="item in userInfo.tags" size="medium" round color="#7b8584" text-color="#fff">{{ item }}</van-tag>
      </van-col>
    </van-row>

  </div>
  <!-- 内容区域 -->
  <div class="content-container">
    <van-tabs sticky @click-tab="tabClick">
      <!-- tab栏 -->
      <van-tab v-for="item in articleInfo?.tags" :title="item.title" :name="item.id" :key="item.id">
        <van-loading v-if="articleInfo.articles.length === 0" />
        <!-- 内容 -->
        <div class="item-wrap">
          <div class="item" v-for="article in articleInfo.articles" :key="article.id">
            <VanImage class="icon-img" height="200" width="90%" fit="cover" :src="article.cover"></VanImage>
            <p class="title van-ellipsis">{{ article.title }}</p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style lang="less">
.top-container {
  height: 250px;
  position: relative;
  padding-top: var(--van-nav-bar-height);

  &::before {
    content: '';
    position: absolute;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -99;
  }

  .van-nav-bar {
    background-color: transparent;

    .van-icon {
      color: #fff;
      font-size: 20px;
    }
  }

  .info-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
  }

  .info-container {
    margin-top: 10px;

    .icon-img {
      border: 1px solid #fff;
    }

    .username {
      color: white;
      font-size: 20px;
      font-weight: bolder;
    }

    .email,
    .area {
      color: #ccc;
      font-size: 12px;
    }

    .desc {
      color: #fff;
      font-size: 14px;
    }

    .van-tag {
      font-size: 12px;
      margin-right: 10px;
    }

  }

}

.content-container {
  min-height: 200px;
  background-color: #fff;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 12px;
    background-color: #fff;
    left: 0;
    top: -12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  .item-wrap {
    display: flex;
    flex-wrap: wrap;

    .item {
      width: 50%;
      text-align: center;
      padding-top: 20px;
      background-color: #fff;
      border: 2px solid #f1f2f5;
    }

    .title {
      width: 90%;
      margin: 0 auto;
      text-align: center;
    }

    .van-tabs__nav {
      background-color: #f1f2f5;
    }
  }
}
</style>